<template>
<div>
    <Card>
        <Detail v-show="currView=='detail'" @close="currView='index'"/>
        <div v-show="currView=='index'">
            <Row class="mb10">
                <Button type="primary" @click="currView='detail'">进入详情页</Button>
            </Row>
            <Table :columns="columns" :data="data"></Table>
            <ul>
                <Item :list="list"></Item>
            </ul>
        </div>
    </Card>
</div>
</template>

<script>
import Item from './item'
import Detail from './detail'
export default {
  name: 'list',
  components: {
    Item,
    Detail
  },
  props: {
    list: Array
  },
  data () {
    return {
      currView: 'index',
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center',
          className: 'name'
        },
        {
          title: '年龄',
          key: 'age',
          align: 'center'
        },
        {
          title: '班级',
          key: 'className',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.view(params.row)
                    }
                  }
                },
                '查看')
            ])
          }
        }
      ],
      data: []
    }
  },

  beforeCreate () {},
  created () {},
  beforeMount () {},
  mounted () {
    // console.log("in list",this.list);
    this.gatDataList()
  },
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  computed: {},
  methods: {
    gatDataList () {
      this.data = new Array(5).fill({
        name: 'lilei',
        className: '三年2班',
        age: 18,
        cellClassName: {
          age: 'demo-table-info-cell-age'
        }
      })
    }
  },
  watch: {},
  filters: {}
}
</script>

<style>
    .ivu-table .demo-table-info-cell-age {
        background-color: #ff6600;
        color: #fff;
    }
    .ivu-table .demo-table-info-cell-address {
        background-color: #187;
        color: #fff;
    }
    .name{
        background-color: aqua;
    }
</style>
